<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
        <div id="app">
            <com @bye="sayBye" @hello="sayHello"> </com>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{

                },
                methods:{
                    sayHello(){
                        console.log('这是vm里的sayHello方法');
                    },
                    sayBye(){
                        console.log('这是vm里的sayBye方法');
                    }

                },
                components:{
                    com:{
                        template:`<div>
                        <button @click="comHello">comHello</button>
                        <button @click="comBye">comBye</button>
                        </div>`,
                        methods:{
                            comHello:function(){
                                // console.log('这是组件com里的方法');
                                this.$emit('hello');
                            },
                            comBye:function(){
                                this.$emit('bye');
                            }
                        }
                    }
                }
            })
        </script>
</body>
</html>